<template>
  <div class="app-container">
    <a-row>
      <a-col :span="24" class="card-box">
        <a-card title="基本信息">
          <a-descriptions>
            <a-descriptions-item label="Redis版本"><div v-if="cache.info">{{ cache.info.redis_version }}</div></a-descriptions-item>
            <a-descriptions-item label="运行模式"><div v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div></a-descriptions-item>
            <a-descriptions-item label="端口"><div v-if="cache.info">{{ cache.info.tcp_port }}</div></a-descriptions-item>
            <a-descriptions-item label="客户端数"><div v-if="cache.info">{{ cache.info.connected_clients }}</div></a-descriptions-item>

            <a-descriptions-item label="运行时间(天)"><div v-if="cache.info">{{ cache.info.uptime_in_days }}</div></a-descriptions-item>
            <a-descriptions-item label="使用内存"><div v-if="cache.info">{{ cache.info.used_memory_human }}</div></a-descriptions-item>
            <a-descriptions-item label="使用CPU"><div v-if="cache.info">{{ parseFloat(cache.info.used_cpu_user_children).toFixed(2) }}</div></a-descriptions-item>
            <a-descriptions-item label="内存配置"><div v-if="cache.info">{{ cache.info.maxmemory_human }}</div></a-descriptions-item>

            <a-descriptions-item label="AOF是否开启"><div v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div></a-descriptions-item>
            <a-descriptions-item label="RDB是否成功"><div v-if="cache.info">{{ cache.info.rdb_last_bgsave_status }}</div></a-descriptions-item>
            <a-descriptions-item label="Key数量"><div v-if="cache.dbSize">{{ cache.dbSize }} </div></a-descriptions-item>
            <a-descriptions-item label="网络入口/出口"><div v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps</div></a-descriptions-item>
          </a-descriptions>
        </a-card>
      </a-col>

      <a-col :span="12" class="card-box">
        <a-card title="命令统计">
          <div>
            <div ref="commandstats" style="height: 420px" />
          </div>
        </a-card>
      </a-col>

      <a-col :span="12" class="card-box">
        <a-card title="内存信息">
          <div>
            <div ref="usedmemory" style="height: 420px" />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getCacheMonitor } from '@/api/system'
export default {
  data () {
    return {
      // 统计命令信息
      commandstats: null,
      // 使用内存
      usedmemory: null,
      // cache信息
      cache: []
    }
  },
  created () {
    this.getList()
    this.openLoading()
  },
  methods: {
    /** 查缓存询信息 */
    getList () {
      getCacheMonitor().then((response) => {
        this.cache = response.data
        this.$loading.hide()

        this.commandstats = echarts.init(this.$refs.commandstats, 'macarons')
        this.commandstats.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
            {
              name: '命令',
              type: 'pie',
              roseType: 'radius',
              radius: [15, 95],
              center: ['50%', '38%'],
              data: response.data.commandStats,
              animationEasing: 'cubicInOut',
              animationDuration: 1000
            }
          ]
        })
        this.usedmemory = echarts.init(this.$refs.usedmemory, 'macarons')
        this.usedmemory.setOption({
          tooltip: {
            formatter: '{b} <br/>{a} : ' + this.cache.info.used_memory_human
          },
          series: [
            {
              name: '峰值',
              type: 'gauge',
              min: 0,
              max: 1000,
              detail: {
                formatter: this.cache.info.used_memory_human
              },
              data: [
                {
                  value: parseFloat(this.cache.info.used_memory_human),
                  name: '内存消耗'
                }
              ]
            }
          ]
        })
      })
    },
    // 打开加载层
    openLoading () {
      this.$loading.show({ tip: '正在加载缓存监控数据，请稍候！' })
    }
  }
}
</script>

<style scoped>

</style>
